<template>
    <div>
      <el-row class="bread-nav">
        <ul class="bread-nav-title">
          <span>资料变更日志</span>
        </ul>

        <ul class="bread-nav-content-right">
          <a class="back" @click="goBack">返回</a>
        </ul>
      </el-row>

      <div class="elTable">
        <table class="myTable">
          <thead>
          <tr>
            <th>
              ID
            </th>
            <th>
              变更时间
            </th>
            <th>
              变更类别
            </th>
            <th>
              原始值
            </th>
            <th>
              变更值
            </th>
            <th>
              变更人
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td>
              {{index}}
            </td>
            <td v-if="params.username === null">
              {{item.username}}
            </td>
            <td>
              {{ format(item.created_at) }}
            </td>
            <td>
              {{item.ip}}
            </td>
            <td>
              {{item.data}}
            </td>
            <td>
              {{item.data}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>


      <div style="margin-top:8px">
        <el-tag type="info" style="width:100%">注意:登录日志最少被保留7天,超过7天部分最多保留最后20条.</el-tag>
      </div>

    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'dataLog',
    data() {
      return {
        userName: '', // 其他用户名
        list: null,
        loading: true,
      }
    },
    computed: {
      ...mapGetters(['info']),
    },
    created() {
      // 拉取数据
      // this.checkParams(this.$route.params)
      //
      // this.fetchData()
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      // 日期格式化
      format(shijianchuo) {
        // shijianchuo是整数，否则要parseInt转换
        const time = new Date(parseInt(shijianchuo))
        const y = time.getFullYear()
        const m = time.getMonth() + 1
        const d = time.getDate()
        const h = time.getHours()
        const mm = time.getMinutes()
        const s = time.getSeconds()
        return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s)
      },
      // 检查参数
      checkParams(params) {
        if (params && params.username && params.username !== ':username') {
          this.params.username = params.username
        } else {
          this.params.username = this.info.username
        }
      },
      // 获取数据
      fetchData() {
        this.loading = true
        this.userName = this.$route.query.userName
        if (this.userName) {
          this.$store.dispatch('ListLoginHists', { username: this.userName }) // {params: this.params, pagination: this.pagination,} // 路由参数
            .then(response => {
              this.loading = false
              if (response.data) {
                this.list = response.data.slice(0, 20)
              }
            })
        } else {
          this.$store.dispatch('GetSelfLog') // {params: this.params, pagination: this.pagination,} // 路由参数
            .then(response => {
              this.loading = false
              this.list = response.data.slice(0, 20)
            })
        }
      },
    },
  }
</script>

<style scoped>

  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }



  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }

</style>
